import React, { useState, useEffect, useMemo , useRef} from 'react'
import SearchBar from '../../components/SearchBar'
import { Table, Image, Switch, Button, Modal } from 'antd'
import { fetchCateLists } from '@a/cateLists'
import CateAdd from './components/CateAdd'
import CateUpdate from './components/CateUpdate'

export default function CateLists() {
  const searchParams = {
    keyWord: '',
    start: '',
    end: ''
  }
  const ref = useRef();
  const handleSearch = params => {
    // 点击搜索栏 搜索
    searchParams.keyWord = params.keyWord;
    searchParams.start = params.range[0];
    searchParams.end = params.range[1];
    // 重新发送请求
    getCateLists()
  }
  // 定义表格 列格式
  const columns = [
    {
      title: '分类名字',
      dataIndex: 'cateName',
      key: 'cateName'
    },
    {
      title: '分类图标',
      dataIndex: 'icon',
      render: (value, row, index) => {
        return (
          <Image width={80} src={value}/>
        )
      },
      key: 'icon'
    },
    {
      title: '是否启动',
      dataIndex: 'enable',
      render: (value) => {
        return (
          <Switch checked={value}/>
        )
      },
      key: 'enable'
    },
    {
      title: '操作',
      render: (value,row) => {
        return (
          <>
            <Button type='primary' danger>删除</Button>
            <Button onClick={
              () => {
                // 控制 修改商品弹窗显示隐藏
                setCateId(row.id)
                setCateUpdate(true)

              }
            }>编辑</Button>
          </>
        )
      },
      key: 'action'
    }
  ]
  // 商品分类列表获取
  const [cates, setCates] = useState([])
  // 当前页
  const [page, setPage] = useState(1);
  // 一页多少条
  const [pageSize, setPageSize] = useState(10);
  // 总条数
  const [total, setTotal] = useState(0);
  const paginationChange = (page, pageSize) => {
    // 改变分页组件页码或者一页多少条
    setPage(page)
    setPageSize(pageSize)
    
  }
  const getCateLists = () => {
    fetchCateLists({
      ...searchParams,
      page,
      pageSize
    }).then(res => {
      if (res.data.code === 200) {
        setCates(res.data.data.lists)
        setTotal(res.data.data.total)
      }
    })
  }
  // 监听页码 或者 一页多少条 重新发送请求
  useMemo(() => {
    getCateLists();
  }, [page, pageSize])
  // 控制增加商品弹窗显示隐藏
  const [showCateAddModal, setCateAdd] = useState(false);

   // 控制修改商品弹窗显示隐藏
   const [showCateUpdateModal, setCateUpdate] = useState(false);
  //  修改商品分类id
  const [cateId, setCateId] = useState(-1);
  return (
    <div>
      <SearchBar handleSearch={handleSearch}/>
      {/* 表格渲染分类列表 */}
      <Button type='primary' onClick={
        () => {
          setCateAdd(true)
        }
      }>增加商品分类</Button>
      <Table 
        rowKey="id" 
        scroll={{
          y: 400
        }}
        dataSource={cates} 
        columns={columns}
        pagination={
          {
            current: page,
            pageSize: pageSize,
            showQuickJumper: true,
            total: total,
            onChange: paginationChange
          }
        }
      />
      {/* /表格渲染分类列表 */}
      {/* 增加商品分类弹窗 */}
      <Modal 
        title="增加商品" 
        open={showCateAddModal}
        footer = {null} 
        onCancel={() => {
          setCateAdd(false)
        }}
      >
        <CateAdd/>
      </Modal>
      {/* /增加商品分类弹窗 */}

      {/* 修改商品分类弹窗 */}
      <Modal 
        title="修改商品分类" 
        open={showCateUpdateModal}
        footer = {null} 
        onCancel={() => {
          setCateUpdate(false)
        }}
      >
        <CateUpdate cateId={cateId}/>
      </Modal>
      {/* /修改商品分类弹窗 */}
    </div>
  )
}
